<template>
    <div class="shop-cart-page">
        <!--头部标题-->
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$goBalck"/>
        <!--购物车内容-->
        <!--没有商品-->
        <div class="empty-box" v-if="shopCartData.length == 0">
            <van-icon name="smile-o" size="32px" />
            <p>购物车空空空如也</p>
            <van-button style="width: 200px;" type="primary" to="/" color="#1baeae">前往首页</van-button>
        </div>
        <!--有商品-->
        <div class="unempty-box" v-if="shopCartData.length > 0">
            <!--购物车列表-->
            <div class="shop-cart-box">
                <div class="shop-cart-item" v-for="i in 20" :key="i">
                    <!--多选-->
                    <van-checkbox v-model="checked"></van-checkbox>
                    <!--图片-->
                    <img src="https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40pro%2B.png">
                    <!--右侧内容-->
                    <div class="right-box">
                        <!--头部标题-->
                        <div class="top">
                            <!--标题文字-->
                            <span>HUAWEI Mate 40 Pro+ 5G 全网通 12G... </span>
                            <!--数量-->
                            <span>x1</span>
                        </div>
                        <div class="botton">
                        <!--底部价格-->
                            <!--价格消息-->
                            <span>￥7988</span>
                            <!--数量加减-->
                            <van-stepper v-model="value"/>
                        </div>
                        
                    </div> 
                </div>
            </div>
            <!--底部结算-->
            <van-submit-bar :price="3050" button-color="#000" button-text="结算">
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <!--底部导航-->
        <van-tabbar v-model="active" fixed route>
            <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item badge="1" to="/shopCart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

export default {
    name: '',

    components: {

    },

    data() {
        return {
            active: 2,
            shopCartData: [1],//购物车数据
            checked:false,//全选选中状态
            value:1//购物车数量
        }
    },

    created() {

    },

    methods: {

    },

}

</script>

<style scoped lang="less">
.unempty-box{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    .shop-cart-box{
        flex: 1;
        overflow-y: auto;
        padding: 0 12px;
        .shop-cart-item{
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            img{
                height: 50px;
                margin:0 16px;
            }
            .right-box{
                flex: 1;
                overflow: hidden;
                .top{
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 12px;
                    }
                    & span:nth-child(1){
                        flex: 1;
                        margin-right: 10px;
                        /* 溢出隐藏，多余部分...表示 */
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                .botton{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span{
                        color: red;
                    }
                }
            }
        }
    }
}
.shop-cart-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.van-submit-bar{
    position: relative;
}
.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.van-tabbar{
    position: relative !important;
}
</style>